<template>
  <div id="helperInfo">
    <div id="infoBox">
      <div class="row vux-1px-tb ">
        <span>投资金额</span>
        <input type="number" onkeyup="value=value.replace(/[^\d]/g,'')" v-model="money" style="outline:none">元
      </div>
      <div class="row vux-1px-b">
        <span>投资期限</span>
        <div @click="changeMonth" class="r2">
          <span v-text="currentMonth" style="margin-left:4.3rem;font-weight: bold;"></span>
          <img src="../../../../../static/assets/arrowr.jpg" style="width:.2rem;margin-left:.24rem" >
        </div>
      </div>
      <button @click="check">查看推荐方案</button>
    </div>
    <div v-transfer-dom class="helperpop">
      <popup v-model="showTime" class="height:7.0933rem">
        <popup-header
        left-text="取消"
        right-text="确定"
        title="投资期限"
        :show-bottom-border="false"
        @on-click-left="showTime = false"
        @on-click-right="choose"></popup-header>
        <group>
          <radio :options="months" @on-change="change" :selected-label-style="isActive" v-model="currentMonth"></radio>
        </group>
      </popup>
    </div>
    <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>
  </div>
</template>
<script>
import { Popup,TransferDom,PopupHeader,Group,Radio,Toast } from 'vux'
import {showMsg} from '../../../../config/mUtils'
import {getHelperList} from '../../../../service/getData.js'

export default {
  components:{
    Popup,
    PopupHeader,
    Group,
    Radio,
    Toast
  },
  data(){
    return {
      money:'',
      showTime:false,
      months:['1个月','3个月','6个月','12个月'],
      isActive:{
        color:'#e67d78'
      },
      currentMonth:'1个月',
      currentMonthTemp:'',
      showPositionValue:false,
      msg:''
    }
  },
  watch:{
    currentMonth(val){
      this.$emit('getMonth',this.getNumber(val))
    },
    money(val){
      this.$emit('getMoney',val)
    }
  },
  methods:{
    check(){
      if(this.money < 10000){
        showMsg("投资金额要大于10000元",this);
      }else{//TODO:请求
        //console.log(`${this.getNumber(this.currentMonth)}/${this.money}`)

        getHelperList(this.money,this.getNumber(this.currentMonth))
          .then(res=>{
            if(res.cplist.length == 0){
              showMsg('无查询结果',this)
            }else{
              this.$emit('getHelperList',res)
            }
          })
      }
    },
    getNumber(str){
      return this.months.indexOf(str)+1
    },
    change (value, label) {
      this.currentMonthTemp = value
    },
    changeMonth(){
      this.showTime = true;
    },
    choose(){
      this.showTime = false;
      this.currentMonth = this.currentMonthTemp
    }
  },
  directives: {
    TransferDom
  },
}
</script>
<style lang="less" >
@popup-header-right-text-color:#e67d78;
@import '../../../../style/mixin.less';

  #helperInfo{
    height: 5rem;
    width: 9.2rem;
    margin: 0 auto;
    box-shadow:2px 2px 10px #eee;
    padding-top: 0.64rem;
    background-color:#fff;
    #infoBox{
      width: 8rem;
      height: 4.32rem;
      margin: 0 auto; 
      .row{
        font-size: 0.4rem;
        width: 8rem;
        height: 1.1467rem;
        .fx(row,space-between);
        .r2{
          display: flex;
          flex-direction: row;
          align-items: center;
        }
        img{
          float: right;
        }
        input{
          font-size: 0.4rem;
          width: 72%;
          height: 1rem;
          padding-right: .1rem;
          text-align: end;
          // margin-left: 3rem;
          font-weight: bold;
          border: 1px solid transparent;
        }
      }
      button{
        background-color:#5785ec;
        color:#fff;
        width:100%;
        height:1.2rem;
        border-radius:2rem;
        margin-top: 1rem;
        font-size: 0.4rem;
        border-color: transparent
      }
    }
    .weui-toast,.weui-toast_text,.vux-toast-middle{
      width: 70% !important;
      p.weui-toast__content{
        margin: 0 !important;
      }
    }
  }
  .helperpop{
    .vux-popup-header-right{
      color:#e64f2b !important;
    }
    // .vux-popup-dialog{
    //   height: 7.1rem !important;
    //   background-color: #fff !important;
    // }
    .vux-popup-header-right{
      color:@popup-header-right-text-color !important;
    }
    .vux-popup-header{
      height: 1.6533rem !important;
      line-height: 1.6533rem !important;
      border-bottom: 1px solid #e6e6e6 !important;
    }
    .vux-no-group-title{
      margin: 0
    }
    .weui-cell__bd p{
      text-align: center;
    }
    .weui-cells_radio .weui-cell__ft{
      display: none
    }
  }
</style>

